<template>
  <view class="message-box">
    <view class="message-tap">
      <view class="message-tap-item" :class="tapId === item.id ? 'message-tap-item-active' : ''"
            v-for="(item, index) in tapList" :key="index" @click="changeTapId(item.id,index)">
        <image class="message-tap-icon" :src="item.icon"></image>
        <text class="message-tap-title">{{ item.title }}</text>
        <view class="num" v-if="item.num>0">{{ item.num }}</view>
      </view>
    </view>
    <scroll-view scroll-y @scrolltolower="end" :scroll-top="scrollTop" lower-threshold="200" class="message-list">
      <!--      <loading-circle :fixed="false"></loading-circle>-->
      <view class="message-item" :class="item.flag===1?'message-item-active':''" v-for="(item, index) in list"
            :key="index" @click="toDetails(item)">
        <view class="user-info">
          <view class="user-image">
            <image :src="item.avatar"></image>
            <view class="icon" v-if="item.flag===1"></view>
          </view>
          <view class="user-name">{{ item.nickName }}</view>
        </view>
        <view v-if="item.msgType===0" class="desc">赞了你的说说《
          <text>{{ item.content }}</text>
          》
        </view>
        <view v-else-if="item.msgType===1" class="desc">赞了你的评论《
          <text>{{ item.content }}</text>
          》
        </view>
        <view v-else-if="item.msgType===2" class="desc">赞了你的评论《
          <text>{{ item.content }}</text>
          》
        </view>
        <view v-else-if="item.msgType===50" class="desc">评论：
          <text>{{ item.content }}</text>
        </view>
        <view v-else-if="item.msgType===100" class="desc">分享了你的说说：
          <text>{{ item.content }}</text>
        </view>
        <view class="time">
          <view class="icon" v-if="item.picNum>0 && item.msgType===50">
            <uni-icons type="image-filled" size="20" color="#666666"></uni-icons>
            {{ item.picNum }}张图片
          </view>
          {{ item.createTime }}
        </view>
      </view>
      <no_order :title="'暂无消息'"
                :icon_url="'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/quanzi/no_Data.png'"
                v-if="list.length===0"></no_order>
      <view style="height: 200rpx;width: 100%;"></view>
    </scroll-view>
  </view>
</template>
<script>

/**
 * 消息中心
 */
export default {
  data() {
    return {
      tapList: [
        {
          id: 1,
          title: "点赞",
          icon: this.image_host + "quanzi/xx_icon_dianzan.png",
          num: 0
        },
        {
          id: 2,
          title: "评论",
          icon: this.image_host + "quanzi/xx_icon_shuoshuoxiaoxi.png",
          num: 0
        },
        {
          id: 3,
          title: "分享",
          icon: this.image_host + "quanzi/xx_icon_fenxiang.png",
          num: 0
        }
      ],
      tapId: 1,
      PostForm: {
        msgtype: 1,
        page: 1,
        pageSize: 10
      },
      list: [],
      count: {},
      scrollTop: 0
    };
  },
  created() {
    this.getMessageCount()
    this.getMessageList()
  },
  methods: {
    init() {
      this.getMessageCount()
      this.getMessageList()
    },
    changeTapId(id, index) {
      this.tapId = id;
      this.PostForm.msgtype = id;
      this.tapList[index].num = 0
      this.PostForm.page = 1
      this.scrollTop = ''
      this.getMessageList()
      this.$nextTick(() => {
        this.scrollTop = 0
      })
    },
    async getMessageList() {
      let data = this.PostForm
      let res = await this.$javaCircle.doRequest("post", 'circle/customer/notice/msgNoticeList', data, 'json')
      this.list = (data.page === 1 ? [] : this.list).concat(res.data.data);
    },
    async getMessageCount() {
      let res = await this.$javaCircle.doRequest("get", 'circle/customer/notice/msgNoticDetail', {}, 'json')
      this.count = res.data.data
      this.tapList[0].num = this.count.likeNum
      this.tapList[1].num = this.count.commentNum
      this.tapList[2].num = this.count.shareNum
    },
    toDetails(item) {
      if (item.msgType !== 2) {
        uni.navigateTo({
          url: '/pages/circle/circleOfFriends/details?id=' + item.actid + '&commentId=' + item.commentId
        })
      } else {
        uni.navigateTo({
          url: "/pages/circle/details/details?id=" + item.actid + '&commentId=' + item.commentId
        })
      }
    },
    end() {
      this.PostForm.page++
      this.getMessageList()
    }
  },
}
</script>

<style lang="scss" scoped>
.message-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.message-tap {
  width: 100%;
  height: 243upx;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 51upx;
  background-color: #fff;
  justify-content: space-between;

  .message-tap-item {
    width: 200upx;
    height: 210upx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s linear;
    position: relative;

    .message-tap-icon {
      width: 124upx;
      height: 124upx;
      margin-bottom: 10upx;
    }

    .message-tap-title {
      font-size: 35upx;
      color: #333333;
      font-weight: 600;
      transition: all 0.3s linear;
    }

    .num {
      position: absolute;
      top: 0;
      right: 0;
      background-color: #F33F02;
      border-radius: 23upx;
      width: fit-content;
      height: 46upx;
      color: #fff;
      font-size: 35upx;
      box-sizing: border-box;
      padding: 0 10upx;
    }
  }
}

.message-tap-item-active {
  background-color: #F4F7FA;
  border-radius: 8upx;

  .message-tap-title {
    color: #4AB16E !important;
  }
}

.message-list {
  flex: 1;
  background-color: #fff;
  overflow: auto;

  .message-item {
    width: 100%;
    box-sizing: border-box;
    padding: 30upx;

    .user-info {
      width: 100%;
      display: flex;
      align-items: flex-start;

      .user-image {
        width: 100upx;
        height: 100upx;
        border-radius: 50%;
        margin-right: 18upx;
        position: relative;

        image {
          width: 100%;
          height: 100%;
        }

        .icon {
          position: absolute;
          width: 14upx;
          height: 14upx;
          background-color: #F33F02;
          top: 0;
          right: 0;
          border-radius: 50%;
        }
      }

      .user-name {
        font-size: 40upx;
        color: #333333;
        font-weight: 500;
      }
    }

    .desc {
      box-sizing: border-box;
      padding-left: 118upx;
      font-size: 38upx;
      color: #666666;
      margin-top: -30upx;

      text {

      }
    }

    .time {
      box-sizing: border-box;
      padding-left: 118upx;
      font-size: 32upx;
      color: #999999;
      margin-top: 8upx;
      display: flex;
      align-items: center;

      .icon {
        display: flex;
        align-items: center;
        color: #666666;
        margin-right: 10upx;
      }
    }
  }

  .message-item-active {
    background-color: #F1F2F6 !important;
  }
}
</style>
